<template>
  <div class="table-wrap">
    <el-table
      v-loading="loading"
      element-loading-text="数据下载中"
      ref="multipleTable"
      class="modify-class"
      :data="tableList"
      tooltip-effect="dark"
      style="width: 100%"
      :height="height"
      :header-cell-style="{ background: '#D8DCEA' }"
      @selection-change="handleSelectionChange"
      @current-change="handleCurrentChange"
      :highlight-current-row="true"
      v-bind="tableProp"
      :row-style='{borderLeft:"1px solid red"}'
    >
      <el-table-column
        v-if="isSelection"
        type="selection"
        width="55"
        align="center"
      >
      </el-table-column>
      <el-table-column label="序号" type="index" align="center" width="60px" />
      <template v-for="(item, key) of tableColumn">
        <el-table-column
          v-if="item.type == 'link'"
          :key="key"
          :prop="key"
          :label="item.label"
          :width="item.width"
          v-bind="item.columnProp"
        >
          <template v-slot="{ row, $index }">
            <el-button
              class="btn-text"
              type="text"
              @click="triggerEvent(key, row, $index)"
              >{{ item.valueField ? row[item.valueField] || item.text : item.text || row[key] }}</el-button
            >
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="item.type == 'select'"
          :key="key"
          :prop="key"
          :label="item.label"
          :width="item.width"
          v-bind="item.columnProp"
        >
          <template v-slot="{ row }">
            <el-select
              v-if="row.edit"
              class="modify-select"
              popper-class="table-select-poppper"
              @change="
                (val) =>
                  (row[key]['message'] = item.selectOption.find(
                    (option) => option.value == val
                  ).label)
              "
              size="small"
              v-model="row[key]['code']"
            >
              <el-option
                v-for="selectItem in item.selectOption"
                :key="selectItem.value"
                :value="selectItem.value"
                :label="selectItem.label"
              />
            </el-select>
            <span v-else>{{ row[key] ? row[key]["message"] : '' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="item.type == 'issue-tracking'"
          :key="key"
          :prop="key"
          :label="item.label"
          v-bind="item.columnProp"
        >
          <template v-slot="{ row }">
            <issue-tracking
              v-model="row[item.valueMap.value]"
              @change="(value) => (row[item.valueMap.value] = value)"
              :edit="row.edit"
              :progress="row[item.valueMap.progress]"
              :count="row[item.valueMap.count]"
              @modify="triggerEvent('modify', key, row, $event)"
            ></issue-tracking>
          </template>
        </el-table-column>

        <el-table-column
          v-else-if="item.type == 'set-number'"
          :key="key"
          :prop="key"
          :label="item.label"
          :width="item.width"
          v-bind="item.columnProp"
        >
         
         <template v-slot="{row}">
            正式品:<input
            class="modify-input"
            v-if="row.edit && !item.readyOnly"
            style="width:60px;height:30px"
            v-model.number="row[item.systemNum]"
            placeholder="请输入"
            size="small"
          />
          <span v-else>{{ row[item.systemNum] }}</span>

          例试品:<input
            class="modify-input"
            v-if="row.edit && !item.readyOnly"
               style="width:60px;height:30px"
            v-model.number="row[item.testNum]"
            placeholder="请输入"
            size="small"
          />
          <span v-else>{{ row[item.testNum] }}</span>
         </template>
        </el-table-column>

        <el-table-column
          :width="item.width"
          v-else-if="item.type == 'focus'"
          :key="key"
          :prop="key"
          :label="item.label"
          v-bind="item.columnProp"
        >
          <template v-slot="{ row, $index }">
            <div style="display: flex; align-items: center; justify-content: center;">
              <div
                class="btn-focus"
                :class="row[key] == 1 ? 'active' : ''"
                @click="triggerEvent('focus', row, $index)"
              ></div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="item.progress"
          :key="key"
          :prop="key"
          :label="item.label"
          :width="item.width"
          v-bind="item.columnProp"
        >
          <template v-slot="{ row, $index }">
            <div class="progress-wrap">
              <div
                :style="{ ...progressColor[row[key]?row[key]['code']:''],display:'flex', justifyContent: 'center', alignItems: 'center'}"
                style="padding: 5px; flex: 1"
              >
             
             <img v-if="(row[key]?row[key]['code']:false)" :src="(row[key]?row[key]['code']:'')|progress" width="15" alt="">
            
             <span style="margin-left:5px">{{ row[item.value] }}</span>
              </div>
              <el-button
                v-if="item.linkText"
                class="btn-text"
                type="text"
                @click="triggerEvent(key, row, $index)"
                style="margin-left: 10px;"
                >{{ item.linkText }}</el-button
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="item.type == 'input'"
          :key="key"
          :prop="key"
          :label="item.label"
          :width="item.width"
          v-bind="item.columnProp"
        >
          <template v-slot="{ row }">
            <el-input
              class="modify-el-input"
              v-if="row.edit"
              v-model="row[key]"
              placeholder="请输入"
              @input="inputChangeHandle(row, key)"
              size="small"
            ></el-input>
            <span v-else>{{ row[key] }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="item.type == 'apply-report'"
          :key="key"
          :prop="key"
          :label="item.label"
          :width="item.width"
          v-bind="item.columnProp"
        >
          <template v-slot="{ row, $index }">
            <div class="btn-list">
              <upload-attach  @upload-success="reportUploadSuccess($event, key, row, $index)"
            />
            <el-button
              v-if="row[key]"
              class="btn-text"
              type="text"
              @click="downloadHandle(key, row, $index)"
              style="margin-left: 10px;"
              >查看</el-button>
              <span v-else style="margin-left: 40px;">&nbsp;</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.type == 'device-no'"
          :key="key"
          :prop="key"
          :label="item.label"
          :width="item.width"
          v-bind="item.columnProp">
          <template v-slot="{ row }">
            <el-input
              class="modify-el-input"
              v-if="row.edit"
              v-model="row[key]"
              placeholder="请输入"
              size="small"
            ></el-input>
            <span v-else>{{row.deviceNos}}</span>
            <!-- <template v-else>
              <span v-if="row['deviceNos'] && row['deviceNos'].length == 1">{{row[key]}}</span>
              <el-popover
                v-else
                placement="right"
                trigger="hover">
                <div v-if="row['deviceNos'] && row['deviceNos'].length > 1">
                  <p v-for="(text, index) in row['deviceNos']" :key="index">{{text}}</p>
                </div>
                <span slot="reference">{{row['deviceNos'] ? row['deviceNos'][0] : ''}}</span>
              </el-popover>
            </template> -->
          </template>
        </el-table-column>
         <el-table-column v-else-if="item.type == 'photo-enclosure'"
          :key="key"
          :prop="key"
          :isFile="item.isFile"
          :label="item.label"
          :width="item.width"
          v-bind="item.columnProp">
          <template v-slot="{ row }">
            <div class="photo-file-wrap">  
              <el-image
              style="min-width: 30px; min-height: 30px;width:60px;heigt:60px;cursor:pointer;"
              :src="row.photoEnclosure"
              fit="fill"></el-image>
              <span v-if="item.isFile">/附件</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="item.type == 'status'"
          :key="key"
          :prop="key"
          :label="item.label"
          :width="item.width"
          v-bind="item.columnProp"
        >
          <template slot-scope="scope">{{ scope.row.stockStatus==='1'?'已出库':scope.row.stockStatus?'已入库':'' }}</template>
        </el-table-column>
        <el-table-column
          v-else-if="item.type == 'upload-btn1'"
          :key="key"
          :prop="key"
          :label="item.label"
          :width="item.width"
          v-bind="item.columnProp"
        >
          <template slot-scope="scope">
              <div style="display:flex;align-items: center">
                <import-data api-url="/attach/upload" title="上传报告" @upload-success="uploadSuccess1($event,scope.row)"/>
                <div v-if="scope.row.reportAttachId" class="upload-text" @click="downReportFile(scope.row)"> 
                  <a title="查看报告" :href="url + exportSysUrl +'?id=' + scope.row.reportAttachId"> 查看</a>
                </div>
                <div v-if="scope.row.psjlAttachId" class="upload-text" @click="downReportFile(scope.row)"> 
                  <a title="查看报告" :href="url + exportSysUrl +'?id=' + scope.row.psjlAttachId"> 查看</a>
                </div>
              </div>
          </template>
        </el-table-column>
         <el-table-column
          v-else-if="item.type == 'upload-btn2'"
          :key="key"
          :prop="key"
          :label="item.label"
          :width="item.width"
          v-bind="item.columnProp"
        >
          <template slot-scope="scope">
            <div style="display:flex;align-items: center">
              <import-data api-url="/attach/upload" title="上传结论" @upload-success="uploadSuccess2($event,scope.row)"/>
              <div v-if="scope.row.resAttachId" class="upload-text" @click="downReportFile(scope.row)"> 
                <a title="查看结论" :href="url + exportSysUrl +'?id=' + scope.row.resAttachId"> 查看</a>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          v-else
          :key="key"
          :prop="key"
          :label="item.label"
          :width="item.width"
          v-bind="item.columnProp"
        >
        </el-table-column>
      </template>
      <el-table-column v-if="operation" label="操作" :width=" isDelete ? 100 : 60" fixed="right">
        <template v-slot="{ row, $index }">
          <div class="btn-list">
            <div
              v-if="!row.edit"
              class="btn-img table-btn hover"
              @click="editRow(row, $index)"
              size="small"
            > 
              <span class="icon-img edit"></span>
            </div>
            <div
              v-else
              class="btn-img table-btn hover"
              @click="saveRow(row, $index)"
              size="small"
            >
              <span class="icon-img save"></span>
            </div>
            <div
              v-if="isDelete"
              class="btn-img table-btn hover"
              @click="deleteRow(row, $index)"
              size="small"
            >
              <span class="icon-img delete"></span>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { progressColor } from "@/utils/const.js";
import IssueTracking from "./IssueTracking.vue";
import UploadAttach from "./UploadAttach.vue";
import { exportFile } from "@/utils/index.js";
import icon_no_pic_ from '@/assets/icon/icon_no_pic_.png'
import icon_ok_pic from '@/assets/icon/icon_ok_pic.png'
import icon_c_pic from '@/assets/icon/icon_c_pic.png'
import icon_d_pic from '@/assets/icon/icon_d_pic.png'
import ImportData from '@/components/ImportData.vue'
import acceptanceApi from "@/apis/overview/acceptance.js"
export default {
  components: { IssueTracking, UploadAttach, ImportData },
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    tableColumn: {
      type: Object,
      default: () => {},
    },
    tableData: {
      type: Array,
      default: () => [],
    },
    isSelection: {
      type: Boolean,
      default: false,
    },
    isDelete: {
      type: Boolean,
      default: () => true,
    },
    operation: {
      type: Boolean,
      default: true,
    },
    height:[Number,String],
    tableProp: {
      type: Object,
      default() {
        return {}
      }
    },
    currentDft: {
      type: Number,
      default: -1
    }
  },
  watch: {
    tableData: {
      handler(n) {
        this.tableList = n;
      },
      deep: true,
      immediate: true,
    },
    tableList(val) {
      if (this.currentDft > -1) {
        this.$refs.multipleTable.setCurrentRow(val[this.currentDft])
      }
    }
  },

  data() {
    this.tempList = []

    return {
      progressColor,
      tableList: [],
      url: process.env.VUE_APP_BASE_API,
      exportSysUrl: acceptanceApi.downFile,
    };
  },
  filters:{
    progress:(v)=>{
      // let v=(value&&value||'0').replace('%','');
      if(v==='GREY'){
        return icon_d_pic;
      }else if(v==='YELLOW'){
         return icon_ok_pic; 
      }else if(v=='GREEN'){
         return icon_c_pic

      }else{
         return icon_no_pic_;
      }


    }
  },
  methods: {
    inputChangeHandle(row, key) {
      clearTimeout(this.inputTimer);
      this.inputTimer = setTimeout(() => {
        this.$emit('input-change', row, key);
      }, 250);
    },
    //编辑
    editRow(row, index) {
      console.log(row)
      if (row?.edit === false) {
        // this.tempList[index] = JSON.parse(JSON.stringify(row))
        row.edit = true;
      }
    },
    //保存
    saveRow(row, index) {
      this.$confirm("确定保存该行数据吗？", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$emit("on-save", row, index);
        })
        .catch(() => {
          // let temp = this.tempList[index];
          // if (temp) {
          //   Object.assign(row, this.tempList[index]);
          // } else {
          //   row.edit = false
          // }
        });
    },
    deleteRow(row, index) {
      // let deleteRows = rows.splice(index, 1);
      this.$emit("on-delete", row, index);
    },
    handleSelectionChange(selection) {
      this.$emit("selection", selection);
    },
    handleCurrentChange(selection) {
      this.$emit("current", selection);
    },
    triggerEvent() {
      this.$emit(...arguments);
    },
    downReportFile(selection) {
       this.$emit("downReportFile", selection);
    },
    uploadSuccess1(e,selection) {
       this.$emit("uploadReportFile1", {fileData:e,row:selection});
    },
    uploadSuccess2(e,selection) {
       this.$emit("uploadReportFile2", {fileData:e,row:selection});
    },
    reportUploadSuccess($event, key, row) {
      this.triggerEvent(key + "UploadSuccess", row, {
        id: row.id,
        [key]: $event.id,
        fileName: $event.fileName,
      });
    },
    downloadHandle(key, row) {
      exportFile(
        process.env.VUE_APP_BASE_API + "attach/download",
        { id: row[key] },
        ""
      );
    },
    resize() {
      this.$refs.multipleTable.doLayout()
      // this.$forceUpdate()
    }
  },
  mounted() {
    window.addEventListener('resize', this.resize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resize)
  }
};
</script>

<style lang="scss" scoped>
.progress-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}
.progress-bar {
  margin-top: 4px;
  height: 6px;
  border-radius: 3px;
  background-color: #d7dee6;
  overflow: hidden;
}
.cur-progress {
  height: 100%;
  border-radius: 3px;
}

.btn-focus {
  display: inline-block;
  font-size: 0;
  width: 20px;
  height: 20px;
  cursor: pointer;
  background: url("../assets/icon/icon-focus-empty.png") no-repeat;

  &.active {
    background: url("../assets/icon/icon-focus.png") no-repeat;
  }
}
.photo-file-wrap{
  display: flex;
  align-items: center;
  justify-content: space-around;
  span{
    font-size:14px;
    color:#057cfe;
    text-decoration:underline;
    cursor: pointer;
  }
}
.table-wrap{
  ::v-deep{
    .modify-input{
      outline: none;
      border-radius: 4px;
      padding: 0 6px;

      &::placeholder{
        color: #C0C4CC;
      }
    }

    .modify-input,
    .modify-input:focus,
    .modify-el-input .el-input__inner{
      background-color: transparent;
      border: 1px solid rgb(168, 173, 183);
      font-size: 18px;
    }

    .el-table{
      background-color: transparent;
    }

    .el-table tr{
      position: relative;
      background: #ffffff;

      &.current-row,
      &.hover-row,
      &:hover{
        background-color: #E6EDFB;

        td{
          position: relative;
          transition: none;
          background-color: #E6EDFB;

          &:first-child{
            &::before{
              content: '';
              display: block;
              position: absolute;
              top: 0;
              left: 0;
              bottom: 0;
              width: 3px;
              background-color: rgb(65, 129, 255);
            }
          }
        }
      }
    }

    td {
      transition: none;
    }

    .el-table__empty-block{
      background-color: #ffffff;
    }
  }
}
.upload-text{
  color:#409eff;
  text-decoration: underline;
  cursor: pointer;
  margin-left:6px;
}
</style>